<template>
  <div>

    <div style="width: 1560px; margin: 0 auto; height: 200px">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(item, index) in CarouselMap" :key="index">
          <img :src="item.carouselmap" />
        </el-carousel-item>
      </el-carousel>
    </div>

     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>编辑轮播图</span>
      </div>
      <div>
        <div>
            <span>第一张图片地址:</span><el-input v-model="CarouselMap[0].carouselmap" placeholder="请输入图片url"></el-input>
            <span>第二张图片地址:</span><el-input v-model="CarouselMap[1].carouselmap" placeholder="请输入图片url"></el-input>
            <span>第三张图片地址:</span><el-input v-model="CarouselMap[2].carouselmap" placeholder="请输入图片url"></el-input>
           <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="确认修改吗？"
                @confirm="updateCarouselmap"
              >
           <el-button slot="reference" type="primary" plain>点击修改</el-button>
           </el-popconfirm>
        </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>编辑系统公告</span>
      </div>
      <div>
        公告标题：<el-input
          v-model="from.title"
          placeholder="请输入标题"
        ></el-input>
      </div>
      <div>
        内容：<el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="from.content"
          style="margin: 20px auto;"
        >
        </el-input>
        <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="确认修改吗？"
                @confirm="updateAnnouncement"
              >
        <el-button slot="reference" type="primary" plain>点击修改</el-button>
        </el-popconfirm>
      </div>
    </el-card>

  </div>
</template>

<script>
import AnnouncementApi from '@/api/Announcement/AnnouncementApi'
export default {
  name: "AnnouncementManage",
  data() {
    return {
      from: {
        title: "",
        content: "",
      },
      CarouselMap: [ ],
    };
  },
  created(){
    this.queryAnnouncementList();
    this.queryCarouselmapList();
  },
  methods: {
    queryAnnouncementList(){
        AnnouncementApi.queryAnnouncementList().then(res => {
            console.log(res.data.data)
            this.from=res.data.data
        })
    },
    queryCarouselmapList(){
        AnnouncementApi.queryCarouselmapList().then(res => {
            console.log(res.data.data)

            this.CarouselMap=res.data.data
        })
    },
    updateAnnouncement(){
        console.log(this.from)
        AnnouncementApi.updateAnnouncement(this.from).then(res => {
            this.$message.success("修改成功")
        })
    },
    updateCarouselmap(){
         console.log(this.CarouselMap)
         AnnouncementApi.updateCarouselmap(this.CarouselMap).then(res => {
            this.$message.success("修改成功")
        })
    }

  }
};
</script>

<style scoped>
.el-card {
  width: 80%;
  height: 100%;
  margin: 3% auto;
}
img {
  width: 780px;
  height: 200px;
}
.el-input {
    margin: 20px auto;
}
</style>